<template>
            <div class="resource-table">
          <img src="@/assets/images/resource-table-title.png" alt="" />
          <div class="resource-right-content">
            <div id="resource-chats"></div>
          </div>
        </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted,ref } from "vue";
import ThreeDList from "@/components/tableRightComponents/ThreeDList.vue";
import AreaRankingList from "@/components/tableRightComponents/AreaRankingList.vue";
import { Label3d } from "@/mini3d";
import {getResdistriBution} from "@/api/api.js";

onMounted(() => {
  var chartDom = document.getElementById("resource-chats");
  var myChart = echarts.init(chartDom);
  var option;

  const dataList = ref([
    // {
    //   value: 72,
    //   name: "实验测评",
    // },
    // { value: 480, name: "3D百科" },
    // { value: 380, name: "安全教育" },
    // { value: 148, name: "学科资源" },
  ])

  getResdistriBution().then((res)=>{
    
    res.data.forEach(element => {
      dataList.value.push({
        value:element.num, 


        name:element.name
      })
    });
    // console.log('res',dataList);
    myChart.setOption({
          grid: {
    left: '-2.97%', // 距离容器左边的距离
    right: '5.97%', // 距离容器右边的距离
    top: '-25%', // 距离容器顶部的距离
    // bottom: '4.71%', // 距离容器底部的距离
    containLabel: true // 是否包含坐标轴刻度标签
  },
      series: [
      {
        name: "资源分布",
        type: "pie",
        textStyle: {
          color: "rgb(255, 255, 255)",
        },
        label: {

        textStyle: {
          color: '#ffffff' // 设置标签的字体颜色
        }
        // formatter: '{value}' // 标签内容格式化为当前柱子的值
      },
        radius: ["30%", "40%"],
        data: dataList?.value.map((item) => ({
          ...item,
          label: {
            formatter: "{b}\n\n{c}",
          },
        })),
      },
    ],
    })
  })


  option = {
    grid: {
    left: '-2.97%', // 距离容器左边的距离
    right: '5.97%', // 距离容器右边的距离
    top: '-25%', // 距离容器顶部的距离
    // bottom: '4.71%', // 距离容器底部的距离
    containLabel: true // 是否包含坐标轴刻度标签
  },
    // 定义颜色
    color: [
      "rgb(255, 150, 48)",
      "rgb(24, 254, 240)",
      "rgb(93, 252, 165)",
      "rgb(66, 132, 255)",
      "lightblue",
    ],
    legend: {
      top: "bottom", 
      left: "center",
      textStyle: {
        color: "rgb(255, 255, 255)",
      },
    },
    series: [
      {
        name: "资源分布",
        type: "pie",
        textStyle: {
          color: "rgb(255, 255, 255)",
        },
        label: {

        textStyle: {
          color: '#ffffff' // 设置标签的字体颜色
        }
        // formatter: '{value}' // 标签内容格式化为当前柱子的值
      },
        radius: ["30%", "40%"],
        data: dataList?.value.map((item) => ({
          ...item,
          label: {
            formatter: "{b}\n\n{c}",
          },
        })),
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
  .resource-table {
    width: 48.62%;
    height: 100%;
    background: url("@/assets/images/3D-bg.png");
    background-size: 100% 100%;
    // background-color: rgba(20, 30, 43, 0.63);
    backdrop-filter: blur(5px); /* 创建毛玻璃效果 */
    > img {
      width: 100%;
    }
    .resource-right-content {
      box-sizing: border-box;
      width: 100%;
      height: 86.16%;
      padding: 0 4.4%;
      padding-bottom: 4.4%;

      > div {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>